<template>
	<view class="index">
		<view class="indexHead">
			<!-- <image class="bg" src="/static/images/cartBG1.png" mode=""></image> -->
			<view class="title">
				<view class="title-nav">
					<view class="cen">订单详情</view>
					<image class="left" src="/static/xs_icon/left1.png" mode="widthFix" @click="navigateBack()"></image>
				</view>
			</view>
			<view class="ih_main">
				<!-- "status": 0,订单状态：0待支付 1已支付 -1已取消 <number> -->
				<view class="status">
					<image v-if="orderDetails.status == 0" src="../../../static/xs_icon/wait.png" mode=""></image>
					<image v-else-if="orderDetails.status == 1" src="../../../static/xs_icon/success2.png" mode=""></image>
					<image v-else src="../../../static/xs_icon/cancel.png" mode=""></image>
					<view>{{ orderDetails.status == 0 ? '订单待付款' : orderDetails.status == 1 ? '已购买' : '已取消' }}</view>
				</view>
				<view class="time">
					<text>{{ orderDetails.status == 0 ? '剩余支付时间' : orderDetails.status == 1 ? '您已购买成功' : '购买已取消' }}</text>
					<u-count-down
						v-if="orderDetails.status == 0"
						:timestamp="timestamp"
						bg-color="rgb(0 0 0 / 0%);"
						color="#fff"
						separator-color="#FFF"
						font-size="28"
						:show-days="false"
					></u-count-down>
				</view>
			</view>
		</view>
		<view class="order_main">
			<view class="orderH">
				<view class="left"><text>购买信息</text></view>
			</view>
			<view class="main">
				<view class="mainLeft"><image :src="orderDetails.image" mode=""></image></view>
				<view class="mainRight">
					<view class="rightMain">
						<view class="tit">{{ orderDetails.title }}</view>
						<!-- <view class="des">
							商品描述
						</view> -->
						<view class="wraf">
							<!-- <view class="time"></view> -->
							<view class="time">
								<text v-if="orderDetails.status == 1 && orderDetails.course_type == 1">有效期: {{ orderDetails.end_time }}</text>
							</view>
							<view class="price">￥{{ orderDetails.price }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="button">
					<text class="pay" @tap="handleJump" :data-url="`../orderDetails/orderDetails`">立即支付</text>
				</view> -->
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="details-card">
			<view class="dc-main">
				<view class="dcm-con">
					<view class="dcm-title">订单信息</view>
					<view class="item">
						<view class="i-left">订单编号</view>
						<view class="i-right">
							{{ orderDetails.order_sn }}
							<image @click="doCopy()" src="../../../static/xs_icon/copy.png" mode=""></image>
						</view>
					</view>
					<view class="item">
						<view class="i-left">下单时间</view>
						<view class="i-right">{{ orderDetails.create_time }}</view>
					</view>

					<view class="item" v-if="orderDetails.status == 1">
						<view class="i-left">支付时间</view>
						<view class="i-right">{{ orderDetails.pay_time }}</view>
					</view>
					<view class="item" v-if="orderDetails.status == 1">
						<view class="i-left">支付方式</view>
						<view class="i-right">{{ orderDetails.pay_type == 'alipay' ? '支付宝支付' : '微信支付' }}</view>
					</view>
					<view class="item" v-if="orderDetails.status == 1">
						<view class="i-left">支付金额</view>
						<view class="i-right">￥{{ orderDetails.price }}</view>
					</view>
					<view class="item" v-if="orderDetails.status == -1">
						<view class="i-left">取消时间</view>
						<view class="i-right">{{ orderDetails.update_time }}</view>
					</view>
				</view>
				<view class="pay" v-if="orderDetails.status == 0">
					<view class="p-left">应付金额</view>
					<view class="p-right">￥{{ orderDetails.price }}</view>
				</view>
			</view>
		</view>

		<!--  -->
		<view class="order-bottom" v-if="orderDetails.status != -1">
			<view class="ob-main">
				<view v-if="orderDetails.status == 0" class="chakan" @click="operation('cancel')">取消订单</view>
				<view v-if="orderDetails.status == 0" class="fanhui" @click="operation('pay')">立即支付</view>
				<view v-if="orderDetails.status == 1" class="chakan" @click="operation('see')">去查看</view>
			</view>
		</view>

		<u-modal v-model="show" :content="content" @confirm="confirm" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
// <!-- "status": 0,订单状态：0待支付 1已支付 -1已取消 <number> -->
export default {
	data() {
		return {
			order_id: '', // 订单id
			orderDetails: {},
			timestamp: 0,
			show: false, // 弹窗是否显示
			content: '' // 弹窗显示内容
		};
	},
	onLoad(e) {
		uni.showLoading({
			title: '加载中'
		});
		this.order_id = e.order_id;
		this.postData(e);
		// console.log(this.letterList)
	},
	created() {
		// console.log(this.letterList.length)
	},
	methods: {
		// 获取数据
		postData() {
			this.$api
				.post(global.apiUrls.buyDetails, { order_id: this.order_id })
				.then(res => {
					uni.hideLoading();
					console.log(res);
					this.timestamp = res.data.data.remain_time;
					this.orderDetails = res.data.data;
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		// 操作   cancel 取消订单    pay 立即支付    see 去查看
		operation(type) {
			switch (type) {
				case 'cancel':
					this.show = true;
					this.content = '是否取消订单';
					break;
				case 'pay':
				console.log(this.orderDetails)
					uni.navigateTo({
						url: './orderPayment?price=' + this.orderDetails.price + '&order_sn=' + this.orderDetails.order_sn
					});

					break;
				case 'see':
					uni.navigateTo({ url: '../questionBank/questionBank' });
					break;
			}
		},
		// 弹窗确认  取消订单
		confirm() {
			uni.showLoading({
				title: '加载中'
			});
			console.log(this.orderDetails.order_sn)
			this.$api
				.post(global.apiUrls.cancelOrder, { order_sn: this.orderDetails.order_sn })
				.then(res => {
					console.log(res);
					this.postData();
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		// 返回
		navigateBack() {
			uni.navigateBack();
		},
		// 复制
		doCopy() {
			uni.setClipboardData({
				data: this.orderDetails.order_sn,
				success: function() {
					console.log('复制成功');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './orderDetails.scss';
</style>
